<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
				<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
			.one{
				color: red
			}
			.two{
				color: blue
			}
	
	</style>
	<body>
		<div id="myApp">
			<!--  1 完整写法-->
				<a  v-bind:href="url">百度一下</a>
			<!--  2 简写法-->
				<a  :href="url">百度一下</a>
				
				<span :class="myStyle">你好</span>
				
				<!-- 加一个事件 -->
				<!-- 方法的小括号可以省略 -->
				<!-- 简写：@事件 -->
				<button type="button" @click="get">改变</button>
				<!-- 完整写法: v-on:事件 -->
				<button type="button" v-on:click="get(1)">改变</button>
		</div>
	</body>
	<script>
	     new Vue({
			  el:'#myApp',
			  data:{
				  url:"http://www.baidu.com",
				  myStyle:"one"
			  },
			  methods:{//定义函数
				  get:function(v){
					  //this指的是vue对象
					  this.myStyle = "two";
				  }
			  }
			  
		 })
	</script>
</html>
